<template>
  <div
    :class="['body', darkTheme ? 'dark' : '']"
    :style="{ '--primaryColor': primaryColor }"
  >
    <button
      class="toggle"
      :style="{ '--bgcolor': bgColor }"
      @click="handleClick"
    >
      {{ theme }}
    </button>

    <div class="clock-container">
      <div class="clock">
        <div
          class="needle hour"
          :style="{
            '--bgcolor': bgColor,
            transform: `translate(-50%, -100%) rotate(${hourShow}deg)`,
          }"
        ></div>
        <div
          class="needle minute"
          :style="{
            '--bgcolor': bgColor,
            transform: `translate(-50%, -100%) rotate(${minuteShow}deg)`,
          }"
        ></div>
        <div
          class="needle second"
          :style="{
            transform: `translate(-50%, -100%) rotate(${secondShow}deg)`,
          }"
        ></div>
        <div class="center-point" :style="{ '--bgcolor': bgColor }"></div>
      </div>

      <div class="time" :style="{ '--bgcolor': bgColor }" v-html="timeEl"></div>
      <div
        class="date"
        :style="{ '--bgcolor': bgColor, '--primaryColor': primaryColor }"
        v-html="dateEl"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const timer = ref<any>(null)

const darkTheme = ref<boolean>(false)

const primaryColor = ref<string>("#fff")
const bgColor = ref<string>("#000")

const theme = ref<string>("Dark mode")

const timeEl = ref<string>("")
const dateEl = ref<string>("")

const hourShow = ref<number>(0)

const minuteShow = ref<number>(0)

const secondShow = ref<number>(0)

function handleClick(): void {
  darkTheme.value = !darkTheme.value
  primaryColor.value = primaryColor.value == "#fff" ? "#000" : "#fff"
  bgColor.value = bgColor.value == "#000" ? "#fff" : "#000"
  theme.value = theme.value = "Dark mode" ? "Light mode" : "Dark mode"
}

function setTime() {
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ]
  const months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ]
  const time = new Date()
  const month = time.getMonth()
  const day = time.getDay()
  const date = time.getDate()
  const hours = time.getHours()
  const hoursForClock = hours >= 13 ? hours % 12 : hours
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()
  const ampm = hours >= 12 ? "PM" : "AM"

  timeEl.value = `${hoursForClock}:${
    minutes < 10 ? `0${minutes}` : minutes
  } ${ampm}`
  dateEl.value = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`

  let hourDeg = scale(hoursForClock, 0, 12, 0, 360)

  let minuteDeg = scale(minutes, 0, 60, 0, 360)

  let secondDeg = scale(seconds, 0, 60, 0, 360)

  hourShow.value = hourDeg
  minuteShow.value = minuteDeg
  secondShow.value = secondDeg
}

function scale(
  num: number,
  in_min: number,
  in_max: number,
  out_min: number,
  out_max: number
): number {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

onMounted(() => {
  setTime()
  timer.value = setInterval(setTime, 1000)
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
